<template>
  <table class="api-table">
    <tr class="table-tr table-head">
      <td class="table-td">名称</td>
      <td class="table-td">类型</td>
      <td class="table-td">默认值</td>
      <td class="table-td">必填</td>
      <td class="table-td">描述</td>
      <td class="table-td">版本</td>
    </tr>
    <tr
      v-for="(item,index) in params"
      :key="'params-' + index"
      class="table-tr"
    >
      <td class="table-td">{{ item.name ? item.name : "" }}</td>
      <td class="table-td">{{ item.type ? item.type : "" }}</td>
      <td class="table-td">{{ item.default ? item.default : "" }}</td>
      <td class="table-td">{{ item.must ? item.must : "否" }}</td>
      <td class="table-td">{{ item.desc ? item.desc : "" }}</td>
      <td class="table-td">
        <a v-if="item.versionLink" :href="getHref(item)" target="_blank" rel="noopener">{{ item.version ? item.version : "" }}</a>
        <template v-else>{{ item.version ? item.version : "" }}</template>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  props: {
    params: { type: Array, default() { return [] } },
  },
  methods: {
    getHref(item) {
      item = item || {}
      let link = item.versionLink
      // console.log('vuepress环境 -> SW_NODE_ENV=', SW_NODE_ENV)
      const site = this.$site || {}
      let base = site.base
      if (base) {
        const spstr = base.split('')
        if (spstr[spstr.length - 1] === '/') {
          base = base.slice(0, base.length - 1)
        }
      } else {
        base = '/#'
      }

      if (link) {
        link = base + link
      } else {
        link = '#'
      }
      return link
    }
  }
};
</script>

<style src="../css-component/style.css"></style>
<style scoped>
</style>
